<template>
	<div class="box">
		<div class="head_box">
			<div class="company_title">
				<div class="short_name">
					<p>{{ '科拓工程' }}</p>
				</div>
				<div class="company_title_right">
					<div class="company_name">科拓工程机械（苏州）有限公司</div>
					<div class="company_label">
						<div class="cunxu labels">存续</div>
						<div class="small_company labels">小微企业</div>
						<div class="pf_ls labels">批发和零售业</div>
					</div>
				</div>
			</div>
			<div class="company_address">
				<!-- <div class="landmark_icon">
          <img
            src="../../assets/imgs/lookAround/coordinate_blue_icon.svg"
            alt=""
          />
        </div> -->
				<!-- <div class="address_num">908m</div>
        <div class="divider">|</div> -->
				<div class="address_text">苏州工业园区旺墩路135号1005室</div>
			</div>
		</div>
		<div v-for="(item, index) in list" :key="index">
			<div class="identity_information">信用贷</div>
			<div class="passing_rate_box">
				<div class="passing_rate">
					<div class="passing_rate_text">预授信审批通过率</div>
					<div class="semicircle">
						<div class="percentage">
							<div>{{ item.passinRate }}</div>
							<div class="unit">%</div>
						</div>
					</div>
				</div>
				<div class="columnar_box">
					<div class="schedule" :style="{ width: `${item.passinRate}%` }"></div>
				</div>
			</div>
			<div class="passing_rate_box2">
				<div class="passing_rate">
					<div class="passing_rate_text">预授信额度</div>
					<div class="semicircle2">
						<div class="percentage">
							<div>{{ item.limit }}</div>
							<div class="unit">万元</div>
						</div>
					</div>
				</div>
				<div class="columnar_box">
					<div class="schedule2"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: '' /*1. Vue扩展 */,
		extends: '', // extends和mixins都扩展逻辑，需要重点放前面
		mixins: [],
		components: {} /* 2. Vue数据 */,
		props: {},
		model: { prop: '', event: '' }, // model 会使用到 props
		data() {
			return {
				list: [
					{
						passinRate: '80',
						limit: '100',
					},
					{
						passinRate: 70,
						limit: '80',
					},
					{
						passinRate: '50',
						limit: '1100',
					},
				],
			};
		},
		computed: {},
		watch: {} /* 3. Vue资源 */, // watch 监控的是 props 和 data，有必要时监控computed
		filters: {},
		directives: {} /* 4. Vue生命周期 */,
		created() {
      const searchValue = this.$route.query.content
      console.log(searchValue, 'searchValue');
    },
		mounted() {},
		destroy() {} /* 5. Vue方法 */,
		methods: {}, // all the methods should be put here in the last
	};
</script>
<style scoped lang="scss">
	.box {
		font-family: PuHuiTi65;
		height: 100%;
		overflow: auto;
	}
	.head_box {
		padding: 15px;
		background-image: linear-gradient(#c4dfff, #ffffff);
	}
	.short_name {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 36px;
		height: 36px;
		border-radius: 5px;
		background-color: #3282e4;
		font-size: 12px;
		// font-family: Source Han Sans SC;
		color: #ffffff;
		margin-right: 7px;
		p {
			margin: 2px;
			text-align: center;
		}
	}
	.company_title {
		display: flex;
		align-items: center;
	}
	.company_name {
		font-size: 16px;
	}
	.company_label {
		display: flex;
		margin-top: 5px;
	}
	.company_address {
		display: flex;
		margin-top: 10px;
		align-items: center;
		font-size: 14px;
	}
	.company_title_right {
		margin-left: 10px;
	}
	.labels {
		padding: 3px 7px;
		font-size: 12px;
		border-radius: 2px;
		border: 1px solid white;
		margin-right: 10px;
	}
	.cunxu {
		background-color: #e3f2ed;
		color: #3f9f71;
	}
	.small_company {
		background-color: #e4efff;
		color: #3282e4;
	}
	.pf_ls {
		background-color: #fbf1db;
		color: #aa7c1b;
	}
	.landmark_icon {
		margin-top: 5px;
		img {
			width: 15px;
			height: 15px;
		}
	}
	.address_num {
		margin-left: 5px;
	}
	.divider {
		margin: 0 5px;
	}
	.address_text {
		color: #646870;
	}
	.identity_information {
		// background-color: #ecf3fd;
		background-image: url('~img/lookAround/title_base.png');
		height: 30px;
		line-height: 30px;
		width: 100%;
		padding: 0 10px;
		font-size: 14px;
		// font-weight: 600;
		background-size: 100% 100%;
		//   background-position-x: -120px;
		//   margin-bottom: 10px;
		margin-top: 10px;
		font-family: 'PuHuiTi65';
	}
	.semicircle {
		width: 139px;
		height: 70px;
		text-align: center;
		background-image: url('~img/lookAround/blue_Semicircle.png');
    background-repeat: no-repeat;
		color: #3282e4;
		font-family: PuHuiTi65;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.semicircle2 {
		width: 139px;
		height: 70px;
		text-align: center;
		background-image: url('~img/lookAround/green_Semicircle.png');
    background-repeat: no-repeat;
		color: #5bae86;
		font-family: PuHuiTi65;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.passing_rate_box {
		margin-top: 15px;
	}
	.passing_rate_box2 {
		margin-top: 20px;
		margin-bottom: 30px;
	}
	.passing_rate {
		display: flex;
		width: 303px;
		justify-content: space-between;
		// line-height: 90px;
		margin: auto;
	}
	.passing_rate_text {
		margin-top: 30px;
		font-size: 16px;
	}
	.percentage {
		margin-top: 30px;
		font-size: 22px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.unit {
		font-size: 14px;
		margin-top: 3px;
	}
	.columnar_box {
		width: 303px;
		height: 16.6px;
		margin: auto;
		background-color: #ececec;
		border-radius: 10px;
	}
	.schedule {
		height: 100%;
		width: 80%;
		border-radius: 10px;
		background-image: url('~img/lookAround/blue_bar.png');
	}
	.schedule2 {
		height: 100%;
		width: 100%;
		border-radius: 10px;
		background-color: #48cd9c;
	}
</style>
